<template>
  <div class="chain" style="height: 100%">
    <!-- 数量 -->
    <el-row type="flex" class="row">
      <el-col>
        <el-card class="cb" shadow="always">
          <div class="box">
            <div class="img">
              <img src="@/assets/imgs/chain/chain-block.png" alt="区块" />
            </div>
            <div class="title">
              <span>{{ transationTotal.blockNumber }}</span>
              <span>区块数量</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="node" shadow="always">
          <div class="box">
            <div class="img">
              <img src="@/assets/imgs/chain/node.png" alt="节点" />
            </div>
            <div class="title">
              <span>{{ transationTotal.nodeTotal }}</span>
              <span>节点数量</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="tx" shadow="always">
          <div class="box">
            <div class="img">
              <img src="@/assets/imgs/chain/tx.png" alt="交易" />
            </div>
            <div class="title">
              <span>{{ transationTotal.txSum }}</span>
              <span>交易数量</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="pend-tx" shadow="always">
          <div class="box">
            <div class="img">
              <img src="@/assets/imgs/chain/pend-tx.png" alt="待交易" />
            </div>
            <div class="title">
              <span>{{ transationTotal.pendTxSum }}</span>
              <span>待交易数量</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 节点信息 -->
    <el-row class="row">
      <el-table :data="nodeList" border style="width: 100%">
        <el-table-column show-overflow-tooltip prop="nodeId" label="节点ID" align="center">
        </el-table-column>
        <el-table-column prop="blockNumber" label="块高" align="center"> </el-table-column>
        <el-table-column prop="pbftView" label="pbftView" align="center"> </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="commColor[scope.row.status == '1' ? '0' : '1']">
              {{ nodeStatus[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 查询区块 -->
    <el-row class="row">
      <el-col>
        <el-input @keydown.enter.native="searchBlock" placeholder="请输入块高" v-model="blockNum" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click.native="searchBlock"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="row" v-if="Object.keys(blockInfo) != 0">
      <el-col>
        <vue-json-pretty :data="blockInfo" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

const commColor = {
  0: "primary",
  1: "danger",
}

const nodeStatus = {
  0: "禁用",
  1: "运行",
}

import { getNodeList, getTransactionTotal, getSearchBlock } from "@/apis/block.js"
import 'vue-json-pretty/lib/styles.css';
import VueJsonPretty from 'vue-json-pretty';
// import * as echarts from 'echarts';

export default {
  name: "Home",
  components: {
    VueJsonPretty
  },
  data(){
    return {
      notice:{},
      notifications:null,
      nodeList: [],
      transationTotal: {},
      blockInfo: {},
      commColor: commColor,
      nodeStatus: nodeStatus,
      blockNum: '',
    }
  },
  async mounted() {
    // 获取节点信息
    let end1 = await getNodeList()
    let end2 = await getTransactionTotal()
    this.nodeList = end1.data
    this.transationTotal = end2.data
  },
  methods:{
    async searchBlock() {
      if (this.blockNum == "") {
        return
      }
      let res = await getSearchBlock(this.blockNum)
      this.blockInfo = res.data
    },
  }
}
</script>

<style scoped>

</style>
